<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>天天生鲜-商品详情</title>
    <link rel="short icon" href="images/logo.png">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/details.css">
</head>

<body>
<div id="yc-details">
    <div class="header_con">
        <div class="header">
            <div class="welcome fl">欢迎来到天天生鲜</div>
            <div class="fr">
                <div class="login_info fl" v-if="onlogin">
                    欢迎：<em>{{loginName}}</em>
                </div>
                <div class="login_btn fl" v-else>
                    <a href="login.html">登录</a>
                    <span> | </span>
                    <a href="register.html">注册</a>
                </div>
                <div class="user_link fl" v-if="onlogin">
                    <span> | </span>
                    <a href="user_center_info.html">用户中心</a>
                    <span> | </span>
                    <a href="cart.html">我的购物车</a>
                    <span> | </span>
                    <a href="user_center_order.html">我的订单</a>
                    <span>|</span>
                    <a href="" @click.prevent="logout()">退出登录</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 搜素框 -->
    <div class="search_bar clearfix">
        <a href="index.html" class="logo fl"><img src="images/logo.png"></a>
        <div class="search_con fl">
            <input type="text" placeholder="搜素商品" name="" class="input_text fl">
            <input type="button" value="搜索" class="input_btn fr">
        </div>
        <div class="guest_cart fr">
            <a href="cart.html" class="cart_name fl">我的购物车</a>
            <div class="goods_count fl" id="show_count">{{goodsCount}}</div>
        </div>
    </div>

    <!-- 全部商品分类 -->
    <div class="navbar_con">
        <div class="navbar clearfix">
            <!-- 动态下拉框 -->
            <div class="subnav_con fl">
                <h1 class="fl">全商品分类</h1>
                <span></span>
                <ul class="subnav">
                    <li><a href="goods.html#1&新鲜水果" class="fruit">新鲜水果</a></li>
                    <li><a href="goods.html#2&海鲜水产" class="seafood">海鲜水产</a></li>
                    <li><a href="goods.html#3&猪牛羊肉" class="meet">猪牛羊肉</a></li>
                    <li><a href="goods.html#4&禽类蛋品" class="egg">禽类蛋品</a></li>
                    <li><a href="goods.html#5&新鲜蔬菜" class="vegetables">新鲜蔬菜</a></li>
                    <li><a href="goods.html#6&速冻食品" class="ice">速冻食品</a></li>
                </ul>
            </div>
            <ul class="navlist fl">
                <li><a href="index.html">首页</a></li>
                <li class="interval">|</li>
                <li><a href="">手机生鲜</a></li>
                <li class="interval">|</li>
                <li><a href="">抽奖</a></li>
            </ul>
        </div>
    </div>

    <!-- 面包屑导航 -->
    <div class="breadcrumb" id="breadcrumb">
        <a href="javascript:void(0)">全部分类</a>
        <span>&gt;</span>
        <a href="javascript:void(0)" id="goodsType">{{goods.tname}}</a>
        <span>&gt;</span>
        <a href="javascript:void(0)">商品详情</a>
    </div>

    <!-- 商品展示 -->
    <div class="goods_details_con clearfix">
        <!--		<div class="goods_details_pic fl"><img src="images/goods/goods003.jpg"></div>-->
        <div class="goods_details_pic fl"><img :src="'./'+goods.pics"></div>
        <div class="goods_details_list fr">
            <h3>{{goods.gname}}</h3>
            <p>{{goods.intro}}</p>
            <div class="price_bar">
                <span class="show_price">￥<em>{{goods.price}}</em>元</span>
                <!--				<span class="show_price">￥<em>10.5</em>元</span>-->
                <span class="show_unit">单位：<em>{{goods.weight}}</em></span>
            </div>
            <div class="goods_num clearfix">
                <div class="num_name fl">数量：</div>
                <div class="num_add fl">
                    <input type="text" class="num_show fl" value="1">
                    <a href="javascript:;" class="add fr" onclick="add()">+</a>
                    <a href="javascript:;" class="minus fr" onclick="minus()">-</a>
                </div>
            </div>
            <div class="total">总价：<em>{{totalPrice}}</em>元</div>
            <div class="operate_btn">
                <a href="javascript:;" class="buy_btn" id="buy_btn">立即购买</a>
                <a href="javascript:;" class="add_cart" id="add_cart" @click="addCart(goods.gno)">加入购物车</a>
            </div>
            <br/>
            评分：<input style="width: 50px" name="score" type="text" id="score" v-model="score">
            <input type="button" value="确定评分" @click="submitScore()">
        </div>
    </div>

    <!-- 商品详情 -->
    <div class="main_wrap clearfix">
        <div class="l_wrap fl clearfix">
            <div class="new_goods">
                <!--                1111111111111111111111111111111111111111111111111111111111111111111111111-->
                <h3>其他用户的推荐</h3>
                <ul>
                    <li v-for=" recommendGood in recommendGoods">
                        <a :href="'details.html#'+recommendGood.gno" @click="FindGoods(recommendGood.gno)"><img
                                :src=" recommendGood.pics"></a>
                        <h4><a :href="'details.html#'+recommendGood.gno">{{recommendGood.gname}}</a></h4>
                        <div class="price">￥{{recommendGood.price}}</div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="r_wrap fr clearfix">
            <ul class="detail_tab clearfix">
                <li class="active">商品介绍</li>
                <li>评论</li>
                <li>推荐</li>
            </ul>

            <div class="tab_content">
                <dl>
                    <dt>商品详情：</dt>
                    <dd>草莓采摘园位于北京大兴区 庞各庄镇四各庄村
                        ，每年1月-6月面向北京以及周围城市提供新鲜草莓采摘和精品礼盒装草莓，草莓品种多样丰富，个大香甜。所有草莓均严格按照有机标准培育，不使用任何化肥和农药。草莓在采摘期间免洗可以直接食用。欢迎喜欢草莓的市民前来采摘，也欢迎各大单位选购精品有机草莓礼盒，有机草莓礼盒是亲朋馈赠、福利送礼的最佳选择。
                    </dd>
                </dl>
            </div>

        </div>
    </div>
</div>


<!-- 版权所有 -->
<div class="footer">
    <div class="foot_link">
        <a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight &copy; 2019 衡阳市源辰信息科技有限公司 All Rights Reserverd</p>
    <p>电话：0734-8355998 湘ICP备16015987号</p>
</div>
<!--  注意引入顺序 -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/slide.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/qs.js"></script>
<script>
    Vue.prototype.axios = axios;
    axios.defaults.headers.post['Content-Type'] = 'application/json';
    let begin ="http://localhost:20001/";
    let security = "freshgood-security/";
    let goods = "freshgood-goods/";
    let cart = "freshgood-cart/";
    axios.interceptors.request.use(config => {
            const token = localStorage.getItem('token');
            if (token) {
                config.headers.Authorization = token;
            } else {
                config.headers.Authorization = '';
            }
            console.log(token);
            console.log(config);
            return config;
        }, error => {
            return Promise.reject(error);
        }
    );
    let tno;
    let page = 1;
    let rows = 3;

    let app = new Vue({
        el: "#yc-details",
        data: {
            onlogin: false,
            outlogin: true,
            loginName: '匿名',
            mno: 0,
            goods: {},
            carts: {},
            goodsCount: 0,
            totalPrice: 0,
            selectCnos: [], //存储选中购物车记录编号
            selectNum: 0,
            score: 0,//11111111111111111111111111111111111111111
            recommendGoods: {}//1111111111111111111111111111111111111
        },
        mounted: function () {
            //记载页面时，发送请求检查用户是否登录请求  查看购物车
            // axios.all([checkLogin(), findGoods(), addHistory(), findSimilar()])
            //     .then(axios.spread((rs1, rs2, rs3, rs4) => {
            //         if (rs1.data.code === 0) {
            //             //说明未登录
            //             this.onlogin = false;
            //             this.outlogin = true;
            //         } else {
            //             this.loginName = rs1.data.member.nickName;
            //             this.mno = rs1.data.member.mno;
            //             this.carts = rs1.data.carts;
            //             this.onlogin = true;
            //             this.outlogin = false;
            //             // this.carts = rs1.data.cartList;
            //             // this.goodsCount = rs1.data.goodsCount;
            //             for (let i = 0; i < this.carts.length; i++) {
            //                 this.goodsCount += this.carts[i].num;
            //             }
            //         }
            //         this.goods = rs2.data;
            //         this.totalPrice = rs2.data.price;
            //        // this.recommendGoods = rs4.data.recommendGoods;//11111111111111111111111111111111111111111111
            //         // console.log(goods);
            //         // console.log(goods.gname);
            //     }));
            axios.all([checkLogin(), findGoods()])
                .then(axios.spread((rs1, rs2) => {
                    if (rs1.data.code === 0) {
                        //说明未登录
                        this.onlogin = false;
                        this.outlogin = true;
                    } else {
                        this.loginName = rs1.data.user.nickName;
                        this.carts = rs1.data.cartList;
                        this.mno=rs1.data.user.mno;
                        this.onlogin = true;
                        this.outlogin = false;
                        // this.carts = rs1.data.cartList;
                        // this.goodsCount = rs1.data.goodsCount;
                        for (let i = 0; i < this.carts.length; i++) {
                            this.goodsCount += this.carts[i].num;
                        }
                    }
                    this.goods = rs2.data;
                    this.totalPrice = rs2.data.price;
                    // this.recommendGoods = rs4.data.recommendGoods;//11111111111111111111111111111111111111111111
                    // console.log(goods);
                    // console.log(goods.gname);
                }));

        },
        methods: {

            logout: function () {
                axios(loginOut()).then(
                    this.onlogin = false,
                    this.outlogin = true,
                )
                location.href = "login.html";
            },
            addOrder: function () {
                axios.post("order", qs.stringify({
                    op: "add", cnos: this.selectCnos
                })).then(rs => {
                    if (rs.data !== 0) {
                        location.href = "order.html#" + rs.data;
                    } else {
                        alert("下单失败！");
                    }
                })
            },
            addCart: function (gno) {
                if (this.onlogin == false) {
                    //暂未登录
                    alert("暂未登录，请先登录后在添加购物车！");
                    location.href = "login.html";
                    return;
                }
                let flag = 0;
                //判断商品在购物车中是否已存在
                // if (this.carts.length > 0) {
                //
                // }
                if (this.carts != null) {
                    for (let i = 0; i < this.carts.length; i++) {
                        if (this.carts[i].gno == gno) {
                            flag = 1;
                            //有修改
                            axios.post(begin+cart+"cart/addCart", qs.stringify({
                                gno: gno, cno: this.carts[i].cno, num: 1
                            })).then(rs => {
                                if (rs.data > 0) {
                                    //添加成功
                                    this.carts[i].num = this.carts[i].num + 1;
                                    this.goodsCount++;
                                } else {
                                    alert("添加失败！");
                                }
                            });
                        }
                    }
                }
                if (flag == 0) {
                    //购物车没有
                    axios({
                        url:begin+cart+"cart/addCart",
                        params:{
                            num: 1,
                            gno: gno},
                        method:"get"
                    }).then(rs => {
                        let cno = rs.data;
                        if ("0" == cno) {
                            alert("添加失败");
                        } else {
                            //更新数组
                            this.carts.push({gno: gno, cno: cno, num: 1, mno: this.mno});
                            this.goodsCount++;
                        }
                    })
                }
            },
            submitScore: function () {//1111111111111111111111111111111111111111111
                if (this.mno == 0) {
                    alert("请先登录在评分！");
                    location.href = "login.html";
                }
                if (this.score < 0 || this.score > 5) {
                    alert("请输入评分0-5的数字");
                    return;
                }
                var score = this.score;
                var gno = this.goods.gno;
                axios.post("good", qs.stringify({
                    score: score, gno: gno, op: "setScore"
                })).then(rs => {
                    if (rs.data == 1) {
                        alert("设置分数成功");
                    } else {
                        alert("设置分数失败");
                    }
                })
            },

            FindGoods: function (s) {
                axios({
                    url: "http://localhost:20001/freshgood-goods/goods/findByGno",
                    method: "get",
                    params: {gno: s}
                }).then(rs => {
                    this.goods = rs.data;
                    this.totalPrice = rs.data.price;
                })
            },
        }
    });

    function addHistory() {
        let gno = selectName();
        return axios({
            url: "History",
            method: "get",
            params: {gno: gno, op: 'add'}
        });
    }

    var num_show = document.querySelector(".num_show");

    function add() {
        var value = parseInt(num_show.value) + 1;
        // console.log(value)
        num_show.value = value;
        updateTotal();
    }

    function loginOut() {
        return axios.get(begin+security+"security/freshgood/loginOut");
    }

    function minus() {
        var value = parseInt(num_show.value) - 1;
        num_show.value = value <= 0 ? 1 : value;
        updateTotal();
    }

    function updateTotal() {
        // 定义单价、数量、总价的变量
        // 获取显示价格的元素
        var show_price = document.querySelector(".show_price");
        // 从元素中提取单价
        var price = parseFloat(show_price.querySelector("em").innerText);
        var total = document.querySelector(".total em");
        var quantity = parseInt(num_show.value);
        var totalPrice = price * quantity;
        total.innerText = totalPrice;
    }

    function selectName() {
        const Url = window.location.href;// 输出当前网页的完整URL
        const decodedUrl = decodeURI(Url);
        const goodType = decodedUrl.split("#")[1];
        return goodType;
        // console.log(goodType);
    }

    function findGoods() {
        var hash = selectName();
        gno = hash;
        console.log(gno)
        return axios({
            url: "http://localhost:20001/freshgood-goods/goods/findByGno",
            method: "get",
            params: {gno: gno}
        });
    }

    //检查用户是否登录
    function checkLogin() {
        return axios.get(begin+security+"security/freshgood/loginCheck");
    }


    function findSimilar() {//111111111111111111111111111111111111111111111111111
        return axios.get("good?op=findSimilar");
    }


</script>
</body>
</html>
